﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Project.aspx.cs" Inherits="Demo.Web.Reports.Project" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <link href="http://localhost:3040/Resources/css/styles.css" rel="stylesheet" type="text/css" />
    <title>Project Report</title>
    <script type="text/javascript">
        function tipRenderer(storeItem, item) {
            //calculate percentage.
            var total = 0;

            App.Chart1.getStore().each(function (rec) {
                total += rec.get('ResourcesNumber');
            });

            this.setTitle(storeItem.get('Name') + ' No. Recursos: ' + storeItem.get('ResourcesNumber') + ' - ' + Math.round(storeItem.get('ResourcesNumber') / total * 100) + '%');
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <br />
            <ext:Panel ID="Panel1"
            runat="server"
            Width="800"
            Height="600"
            Title="Proyectos"
            Layout="FitLayout">
            <Items>
                <ext:Chart
                    ID="Chart1" 
                    runat="server"
                    Animate="true"
                    Shadow="true"
                    InsetPadding="60"
                    Theme="Base:gradients">
                    <LegendConfig Position="Right" />
                    <Store>
                        <ext:Store ID="Store1" 
                            runat="server"
                            AutoDataBind="true">                           
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="ResourcesNumber" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Series>
                        <ext:PieSeries 
                            AngleField="ResourcesNumber" 
                            ShowInLegend="true" 
                            Donut="0" 
                            Highlight="true" 
                            HighlightSegmentMargin="20">
                            <Label Field="Name" Display="Rotate" Contrast="true" Font="18px Arial" />
                            <Tips ID="Tips1" TrackMouse="true" Width="140" runat="server" Height="28">
                                <Renderer Fn="tipRenderer" />
                            </Tips>
                        </ext:PieSeries>
                    </Series>
                    
                </ext:Chart>
            </Items>
            </ext:Panel>
            <ext:GridPanel
            ID="GridPanel1"
            runat="server" 
            Title="Proyectos" 
            Width="800" 
            Height="310">
            <Store>
                <ext:Store ID="Store2" runat="server" PageSize="10">
                    <Model>
                        <ext:Model ID="Model2" runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                                <ext:ModelField Name="ResourcesNumber" Type="Int" />
                                
                            </Fields>
                        </ext:Model>
                    </Model>                  
                </ext:Store>
            </Store>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Width="35" />
                    <ext:Column ID="Column1" runat="server" Text="Nombre" Width="50px" DataIndex="Name" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Numero de recursos" Width="50px" DataIndex="ResourcesNumber" Flex="1"/>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
            </SelectionModel>
            <View>
                <ext:GridView ID="GridView1" runat="server" StripeRows="true">                   
                </ext:GridView>
            </View>            
            <BottomBar>
                 <ext:PagingToolbar ID="PagingToolbar1" runat="server">
                    <Items>
                        <ext:Label ID="Label1" runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                        <ext:ComboBox ID="ComboBox1" runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="1" />
                                <ext:ListItem Text="2" />
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="20" />
                            </Items>
                            <SelectedItems>
                                <ext:ListItem Value="10" />
                            </SelectedItems>
                            <Listeners>
                                <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.load();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                    <Plugins>
                        <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
                    </Plugins>
                </ext:PagingToolbar>
            </BottomBar>
        </ext:GridPanel>

    </form>
</body>
</html>
